<template>
    <div class="app-container">
        <div class="top-card">
            <div class="left-card">
                13839356987
            </div>
            <div class="right-card">
                <div class="card-item">
                    角色/职务：老板
                </div>
                <div class="card-item">
                    姓名：刘甜文
                </div>
                <div class="card-item">
                    所属行业：-
                </div>
                <div class="card-item">
                    归属人员：赵小刚
                </div>
                <div class="card-item">
                    归属战队：战队名称
                </div>
                <div class="card-item">
                    最近一次跟进时间：2025-06-17
                </div>
            </div>
        </div>
        <div class="mid-button">
            <el-radio-group v-model="midValue">
                <el-radio-button label="1">详细信息</el-radio-button>
                <el-radio-button label="2">变更目录</el-radio-button>
            </el-radio-group>
        </div>
        <div class="info">
            <div class="info-title">
                {{ midValue == '1' ? '资讯信息' : '变更记录' }}
            </div>
            <div class="info-table">
                <el-descriptions :column="2" border v-if="midValue == '1'">
                    <el-descriptions-item>
                        <template slot="label">
                            手机号码
                        </template>
                        kooriookami
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            角色/职务
                        </template>
                        18100000000
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            经销商姓名
                        </template>
                        苏州市
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            所属行业
                        </template>
                        <el-tag size="small">学校</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            细分行业
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            合作意向
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            门店名称
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            员工规模
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            门店地址
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            详细地址
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            资源来源
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            细分来源
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            资源阶段
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            归属人员
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            归属战队
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            备注
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            创建时间
                        </template>
                        江苏省苏州市吴中区吴中大道 1188 号
                    </el-descriptions-item>
                </el-descriptions>
                <div v-else>
                    <el-timeline>
                        <el-timeline-item timestamp="2018/4/12" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/12 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/3" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/3 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        midValue:'1'
    };
  },
  methods: {},
  created() {
    this.$nextTick(() => {
      this.$route.meta.title = "自定义标题";
      const obj = Object.assign({}, this.$route, { title: "自定义标题" }) 
      this.$tab.updatePage(obj);
    });
    console.log(this.$router)
  },
};
</script>

<style lang="scss" scoped>
.app-container {
    .top-card {
        height: 100px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .left-card {
            width: 200px;
            background-color: #1890ff;
            font-size: 26px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            height: 100px;
        }

        .right-card {
            width: calc(100% - 200px);
            background-color: #ebeef5;
            ;
            height: 100px;
            padding-left: 100px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;

            .card-item {
                width: 30%;
            }
        }
    }

    .mid-button {
        margin: 20px 0;
    }

    .info {
        .info-title {
            font-size: 22px;
            height: 25px;
            margin: 20px 0;
            padding: 3px 0 3px 25px;
            font-size: 18px;
            font-weight: bold;
            border-left: 8px solid #409eff;

        }

        .info-table {
            margin-top: 30px;
        }
    }
}
</style>
